<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aichat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .chat-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .chat-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .chat-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .chat-button:hover {
            background-color: #0056b3;
        }
        /* 添加禁用按钮的样式 */
        .chat-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

<div class="chat-container">
    <input type="text" id="chatInput" class="chat-input" placeholder="Type your message...">
    <button id="chatButton" class="chat-button">提问</button>
</div>

<script>
    document.getElementById('chatButton').addEventListener('click', function() {
        var chatButton = this;
        var message = document.getElementById('chatInput').value;
        chatButton.disabled = true; // 禁用按钮

        if(message.trim() !== '') {
            // 这里替换为你的后端请求地址
            var requestURL = 'http://10.203.37.160:5000/api/askAi';
            fetch(requestURL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message: message })
            })
            .then(response => response.json())
            .then(data => {
                alert(data);
                chatButton.disabled = false; // 调用方法结束后启用按钮
            })
            .catch((error) => {
                console.error('Error:', error);
                chatButton.disabled = false; // 调用方法结束后启用按钮
            });
        } else {
            alert('Please enter a message.');
            chatButton.disabled = false; // 如果消息为空，也启用按钮
        }
    });
</script>

</body>
</html>